<template>
    <div class="playMusicModel" v-show="currentMusic.play">
        <div class="music-details">
            <div class="img-box" @click="jumpAudio()">
                <img :src="currentMusic.img" alt="" />
                <div class="hidden-box">
                    <img src="../assets/images/arrowUp.png" alt="" />
                </div>
            </div>
            <div class="content-box">
                <p>{{ currentMusic.name }}</p>
                <span>{{ currentMusic.artistName[0].name }}</span>
            </div>
        </div>
        <div class="play-model">
            <div class="previousMusic" @click="myNextSong(0)">
                <img src="../assets/images/上一首.png" alt="" />
            </div>
            <template>
                <div
                    class="playMusic"
                    v-if="!playMusic"
                    @click="playMusic = !playMusic"
                >
                    <img
                        src="../assets/images/播放.png"
                        alt=""
                        @click="playSong()"
                    />
                </div>
                <div class="pauseMusci" v-else @click="playMusic = !playMusic">
                    <img
                        src="../assets/images/暂停.png"
                        alt=""
                        @click="pauseMusic()"
                    />
                </div>
            </template>
            <div class="nextMusic" @click="myNextSong(1)">
                <img src="../assets/images/下一首.png" alt="" />
            </div>
        </div>
        <div class="play-music" @mouseup="progressMouseUp($event)">
            <div class="current-time">
                {{ timeMinutes(currentMusic.currentPlayTime) }}&nbsp;/&nbsp;
                <span>{{ timeMinutes(currentMusic.time) }}</span>
            </div>
            <div class="progress-bar-warp">
                <div class="progress-bar">
                    <div class="bar-inner" ref="progress">
                        <div
                            class="progress-btn"
                            ref="progressBtn"
                            @mousedown="progressMouseDown($event)"
                        ></div>
                    </div>
                </div>
            </div>
            <audio
                :src="currentMusic.url"
                autoplay
                ref="audioComponent"
            ></audio>
        </div>
        <div class="musicVoice">
            <div class="img-box">
                <template v-if="value3">
                    <img src="../assets/images/声音.png" @click="value3 = 0" />
                </template>
                <template v-else>
                    <img
                        src="../assets/images/静音.png"
                        @click="value3 = 100"
                    />
                </template>
            </div>
            <div class="controlVoice">
                <el-slider
                    v-model="value3"
                    :show-tooltip="false"
                    @change="changeVoice()"
                ></el-slider>
            </div>
        </div>
        <div class="uesrOperation">
            <playMode />
            <div class="tempMusicList">
                <div
                    class="tempMusic-box"
                    @click="musicListBlock = !musicListBlock"
                >
                    <img src="../assets/images/音乐列表.png" alt="" />
                    <transition
                        name="custom-classes-transition"
                        enter-active-class="animated bounceIn"
                        leave-active-class="animated bounceOut"
                    >
                        <div class="hidden-music-box" v-show="musicListBlock">
                            <div class="box-title">
                                <h3>音乐列表</h3>
                                <div class="lajitong" @click="clearHistory">
                                    <img
                                        src="../assets/images/垃圾桶.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div class="box-list">
                                <ul>
                                    <li
                                        v-for="item in tempMusicList"
                                        @click="myListChangeCurrentMusic(item)"
                                        :class="
                                            item.id == currentMusic.id
                                                ? 'currentMusic'
                                                : ''
                                        "
                                    >
                                        <div class="item-name">
                                            <p>{{ item.name }}</p>
                                        </div>
                                        <div class="item-artists">
                                            <p>{{ item.artistName[0].name }}</p>
                                        </div>
                                        <div class="item-time">
                                            <p
                                                v-if="
                                                    item.id != currentMusic.id
                                                "
                                            >
                                                {{ formatTime(item.endtime) }}
                                            </p>
                                            <div class="img-box" v-else></div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </transition>
                </div>
            </div>
            <div class="lyric-box" @click="autoRoll()">
                <div class="lyric" @click="lyricBlock = !lyricBlock">
                    <img src="../assets/images/歌词.png" alt="" />
                    <transition
                        name="custom-classes-transition"
                        enter-active-class="animated bounceIn"
                        leave-active-class="animated bounceOut"
                    >
                        <div class="hidden-lyricBox" v-show="lyricBlock">
                            <h3>歌词</h3>
                            <div class="lyric-info">
                                <div class="lineLyric" ref="scollLine">
                                    <template
                                        v-for="item in currentMusic.lyric"
                                    >
                                        <span
                                            :class="
                                                currentMusic.currentPlayTime >=
                                                    item.time &&
                                                currentMusic.currentPlayTime <=
                                                    item.endtime
                                                    ? 'currentLine'
                                                    : ''
                                            "
                                            >{{ item.lineLyric }}</span
                                        >
                                    </template>
                                </div>
                            </div>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import playMode from "../components/playMusicModel/PlayMode";
import "../utils/animate/animate.min.css";
import { lazyload, debounce, formatTime, timeMinutes } from "../utils/common";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "playMusicModel"
);
export default {
    components: { playMode },
    data() {
        return {
            playMusic: true,
            lyricBlock: false,
            musicListBlock: false,
            audio: {},
            value3: 100,
            timer: 0,
        };
    },
    methods: {
        ...mapMutations([
            "changeCurrentTime",
            "changeTempMusicList",
            "listChangeCurrentMusic",
            "changeTempMusicList",
        ]),
        ...mapActions(["getSongUrl", "nextSong", "randomCycle", "randomCycle"]),
        //改变当前播放时间
        musicTime() {
            //设置定时器，如果当前播放时间超过了音乐的时长则清除掉定时器，然后切入到下一首歌
            this.timer = setInterval(() => {
                // console.log(Math.round(this.$refs.audioComponent.currentTime));
                if (
                    this.currentMusic.currentPlayTime >= this.currentMusic.time
                ) {
                    clearInterval(this.timer);
                    if (this.currentPlayMode == 1) {
                        //全部循环模式
                        this.nextSong(true);
                    } else if (this.currentPlayMode == 2) {
                        //单曲循环模式
                        this.changeCurrentTime(0);
                        this.changPlayTime(0);
                    } else if (this.currentPlayMode == 3) {
                        this.randomCycle();
                    }
                    this.musicTime();
                } else {
                    // console.log(this.$refs.audioComponent.currentTime);
                    //实时更改当前音乐的播放时间
                    let newTime = Math.round(
                        this.$refs.audioComponent.currentTime
                    );
                    this.currentMusic.lyric.forEach((elem, index) => {
                        if (elem.time <= newTime && elem.endtime >= newTime) {
                            this.autoRoll(index);
                        }
                    });

                    let step = 710 / this.currentMusic.time;
                    //根据当前播放时间自动改变进度条
                    this._offset(step * this.$refs.audioComponent.currentTime);
                    this.changeCurrentTime(newTime);
                }
            }, 300);
        },

        //鼠标点击不动后拖动进度条事件
        progressMouseDown(e) {
            // console.log(e.pageX);
            this.touch.sliding = true;
            this.touch.startX = e.pageX; //记录第一次用户鼠标的位置

            let step = 710 / this.currentMusic.time; //换算当前播放音乐的总时间一秒等于多少像素  710是进度条总长度
            let currentTime = this.$refs.audioComponent.currentTime;
            this.touch.length = this.$refs.progress.clientWidth; //记录最开始进度条的长度
            // console.log(this.$refs.progress.clientWidth);
            document.onmousemove = (e) => {
                // console.log(e.pageX);
                let deltaX = e.pageX - this.touch.startX; //计算鼠标移动了多少像素
                let offsetWidth = this.touch.length + deltaX;
                //根据音乐播放
                let moveTime = parseInt(offsetWidth / step);
                console.log(moveTime);
                if (offsetWidth < 710) {
                    this._offset(offsetWidth);

                    this.changPlayTime(moveTime);
                }
            };
        },

        //拖动进度条后改变音乐播放时间事件
        changPlayTime(val) {
            this.$refs.audioComponent.fastSeek(val);
        },

        //歌词自动滚动
        autoRoll(line) {
            this.$refs.scollLine.style.transform = `translateY(-${
                line * 42
            }px)`;
        },

        //鼠标放开后清除掉绑定的拖动进入条事件
        progressMouseUp(e) {
            document.onmousemove = null;
            document.onmouseup = null;
        },
        _offset(offsetWidth) {
            this.$refs.progress.style.width = `${offsetWidth}px`;
        },
        //播放音乐
        playSong() {
            this.$refs.audioComponent.play();
        },
        pauseMusic() {
            this.$refs.audioComponent.pause();
        },
        //上一首下一首歌曲
        myNextSong(val) {
            if (this.currentPlayMode == 1 || this.currentPlayMode == 2) {
                this.nextSong(val);
            } else if (this.currentPlayMode == 3) {
                this.randomCycle();
            }
        },
        //改变音量
        changeVoice() {
            this.$refs.audioComponent.volume = this.value3 / 100;
        },
        myListChangeCurrentMusic(val) {
            console.log("音乐列表数据", val);
            this.getSongUrl(val.id);
            this.listChangeCurrentMusic(val);
        },
        //清理历史记录
        clearHistory() {
            localStorage.removeItem("temp_MusicList");
            this.changeTempMusicList();
        },
        jumpAudio() {
            this.$router.push("/musicAudio");
        },
    },
    created() {
        this.touch = {};
        this.formatTime = formatTime;
        this.timeMinutes = timeMinutes;
    },
    mounted() {
        //进入页面的时候，根据本地存储的音乐改变播放列表
        this.changeTempMusicList();
        this.musicTime();
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    watch: {},
    computed: {
        ...mapState(["currentMusic", "tempMusicList", "currentPlayMode"]),
    },
};
</script>

<style lang='scss' scoped>
@import "../assets/sass/playMusicModel/playMusicModel.scss";
</style>